<template>
	<view class="container">
		<view v-if="plashow" class="platop-css" @click="platop">
			<image src="/static/pla.png" mode="widthFix"></image>
			<!-- <view>顶部</view> -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="sharePrice" v-if="showShare" @click="share">
			<text>分享</text>
		</view>
		<!-- #endif -->
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imagesSwper" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill" @click="previewImg(imagesSwper,index)">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="introduce-section">
			<text class="i_title">{{info.park_goods_info.goods_name||0}}</text>
			<view class="price-box">
				<view class="p_left">
					<text class="price"><text
							class="small">¥</text>{{info.park_goods_info?Number(info.park_goods_info.group_price):''}}</text>
					<text class="m-price">¥{{info.goods_info?Number(info.goods_info.productprice):''}}</text>
				</view>
				<view class="p_right">
					结束时间：{{info.park_info.end_time||0}}
				</view>
			</view>
			<!-- <view class="group_now">
				<image src="/static/home/group_buying.png" ></image>
				<text>消费可得</text>
			</view> -->
			<!-- <view class="butie">
				<view v-if="info.shareprice!=''">分享可赚{{info.agent_reward||0}}元</view>
			</view> -->
		</view>

		<view class="c-list">
			<view class="c-row b-b flex_between">
				<view class="no_refund">此产品不退货</view>
			</view>
		</view>
		<!-- 拼团详情 -->
		<view class="group_details" v-if="info.list&&info.list.length>0&&status==2">
			<view class="gd_tit">
				<view class="gd_left flex_align_center">
					<image src="/static/home/c_line.png"></image>
					<text>拼团详情</text>
				</view>
				<view class="gd_right" @click="lookDetails">
					<text>查看更多</text>
					<image src="/static/jiantou1.png"></image>
				</view>
			</view>
			<view class="g_list">
				<view class="gl_box" v-for="item,i in info.list">
					<text class="slb_left">
						<text>"</text>
						<text>{{item.group_member_info.nickname}}</text>
						<text>"还差</text>
						{{item.remain_num}}人拼团成功
					</text>

					<text class="gl_join" @click="buyshow('Offered',item)">一键参团</text>
				</view>
			</view>
		</view>
		<!-- 图文详情 -->
		<view class="detail-desc" id="desc" v-if="info.goods_info.content">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<jyf-parser :html="info.goods_info.content" :selectable="true"></jyf-parser>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom" v-if="status==2">
			<view class="btn1" @click="buyshow('debutAgroup',{})">一键成团</view>
			<view class="btn2" @click="buyshow('groupPurchase',{})">立即开团</view>
		</view>
		<view class="sharebg" v-if="shareimg!=''" @tap="removeimg">
			<!-- #ifdef APP-PLUS||MP-WEIXIN||MP-ALIPAY -->
			<image @longpress="toSave" :src="shareimg" mode="widthFix"></image>
			<!-- #endif -->
		</view>
		<uni-popup ref="popupMobile" :is-mask-click="true" :z-index="1">
			<view class="nobind">
				<view>您还未绑定手机号</view>
				<image src="/static/close.png" @click="closeBind" mode="widthFix" class="e_close"></image>
				<!-- #ifdef MP-WEIXIN -->
				<button class="l_w_login" open-type="getPhoneNumber" @getphonenumber="getUserProfile">一键绑定手机号</button>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button class="l_w_login" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getUserProfile"
					onError="handleAuthError">一键绑定手机号</button>
				<!-- #endif -->
			</view>
		</uni-popup>
		<groupPopup v-if="popu" :type="groupType" :goodsid="goodsid" :mid="mid" :parkId="parkId" :userData="userData"
			@cler="clet" />
	</view>
</template>

<script>
	import groupPopup from './components/popup.vue';
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			groupPopup,
			jyfParser,
		},
		data() {
			return {
				cid: '',
				shopid: "",
				info: [],
				infoGoods: [],
				infoSaleset: [],

				specSelected: [],
				isspecSelected: "",
				favorite: true,
				num: 1,
				shareimg: "",
				type: 0,
				popu: false,
				ok: '',
				shouqin: false,
				gui: false,
				tim: '',
				timh: '',
				timm: '',
				timse: '',
				plashow: false,
				mid: -1,
				code: '',
				showShare: false,
				isShare: false,
				starttime: 0,



				groupType: '',
				goodsid: '',
				parkId: '',
				status: '',
				imagesSwper: [],
				userData: {
					number: 0,
					name: ''
				}
			};
		},
		async onLoad(options) {
			if (options) {
				this.goodsid = options.goodsid
				this.parkId = options.parkId
				this.status = options.status
			}
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				this.goodsid = this.gup('goodsid', scene);
				this.mid = this.gup('mid', scene);
			}
			this.cid = options.cid;
			uni.setStorageSync('mid', '');
			if (options.mid) {
				this.mid = options.mid;
			}
			if(options.code){
				this.code = options.code;
			}
			if (this.mid != -1) {
				this.isShare = true;
			}
			uni.setStorageSync('mid', this.mid)
			if (options.live_id) {
				uni.setStorageSync('live_id', options.live_id);
			} else {
				uni.setStorageSync('live_id', '')
			}
			this.Show();
			// await this.$onLaunched;
			if (!uni.getStorageSync('token')) {
				this.getToken();
			} else {
				this.showShare = true;
			}
		},
		onPageScroll() {
			var top = '';
			const query = uni.createSelectorQuery().in(this);
			query.select('#desc').boundingClientRect(data => {
				top = data.top;
				this.plashow = top <= 120 ? true : false;
			}).exec();
		},
		methods: {
			// 绑定手机号
			getUserProfile(e) {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						that.$axios('bindmobile/bmobile', "POST", 'member', obj).then(res => {
							if (res.data.code == 200) {
								that.$refs.popupMobile.close();
							}
						})
					},
					fail() {
						that.$api.msg('绑定失败，请重试！')
					}
				})
				// #endif
			},
			closeBind() {
				this.$refs.popupMobile.close();
			},
			lookDetails() {
				uni.navigateTo({
					url: '/pages/product/groupList?goodsid=' + this.goodsid + '&parkId=' + this.parkId
				})
			},
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			day(v) {
				return Math.trunc(v / 60 / 60 / 24);
			},
			getToken() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$axios('login/autologin', 'POST', 'member', {
							mid: this.mid,
							code: res.code,
							aid: '9184'
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
								this.showShare = true;
							}
						})
					}
				})
				// #endif
				// #ifdef H5
				this.$axios('login/autoGzlogin', 'POST', 'member', {
					mid: this.mid,
					code: this.code,
				}).then(res => {
					if (res.data.code == 300001) {
						window.location.href = res.data.data;
					} else if (res.data.code == 200) {
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.getSharePath();
						this.showShare = true;
					}
				})
				// #endif
			},
			// 初始化数据
			Show() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				this.$axios('Group/getGroupListByGoodsId', "POST", 'group_buy', {
					goodsid: this.goodsid,
					park_id: this.parkId,
					// goodsid: '8930312',
					// park_id: 6,
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						that.info = res.data.data;
						that.imagesSwper[0] = that.info.goods_info.thumb
						uni.setNavigationBarTitle({
							title: that.info.park_goods_info.goods_name
						})
					}
				}, (error) => {

				})
			},
			// 长按保存图片
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareimg,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			// 预览图片
			previewImg(logourl, number) {
				let _this = this;
				uni.previewImage({
					current: number,
					urls: logourl,
				});
			},
			// 回到顶部
			platop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			clet() {
				this.popu = !this.popu;
			},
			buyshow(type, item) {
				var that = this;
				this.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						if (res.data.data.member.mobile == '') {
							this.$refs.popupMobile.open();
						} else {
							if (item) {
								this.userData = item
							}
							this.popu = !this.popu;
							this.groupType = type
						}
					}
				})
			},
			share: function() {
				var that = this;
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				that.$axios('ShareInfo/create_goods_poster', "POST", 'group_buy', {
					goodsid: that.goodsid,
					park_id:that.parkId
				}).then(res => {
					if (res.data.code == 200) {
						that.shareimg = res.data.data.url
					}
					uni.hideLoading();
				}, (error) => {

				})
			},
			removeimg: function() {
				this.shareimg = ''
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.type == "share") {
				this.share();
			}
		},
	}

	// function timefun(num) {
	// 	let date = new Date(num);
	// 	let d = date.getDate() - 1; // 日
	// 	let h = date.getHours() - 8;
	// 	d = h < 0 ? d - 1 : d;
	// 	d = d < 10 ? ('0' + d) : d;
	// 	h = h < 0 ? 24 + h : h;
	// 	h = h < 10 ? ('0' + h) : h; //小时补0
	// 	let m = date.getMinutes();
	// 	m = m < 10 ? ('0' + m) : m; //分钟补0
	// 	let s = date.getSeconds();
	// 	s = s < 10 ? ('0' + s) : s; //秒补0

	// 	return d + '天   ' + h + ':' + m + ':' + s;
	// }
</script>

<style lang='scss'>
	page {
		background: #FDF8FF;
	}

	.nobind {
		position: relative;

		.e_close {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}

	.container {
		padding-bottom: 60rpx;
	}

	.group_details {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 15rpx;

		.g_list {
			margin-top: 10rpx;

			.gl_box {
				color: #9A1FE8;
				font-size: 28rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;

				.slb_left {
					width: 80%;
				}

				.gl_join {
					font-weight: 900;
				}
			}
		}

		.gd_tit {
			display: flex;
			justify-content: space-between;

			.gd_left {
				image {
					width: 4rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #13001E;
				}
			}

			.gd_right {
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-left: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: normal;
					color: #999999;
				}
			}
		}
	}

	/* 限时购 */
	.limit {
		position: relative;
		margin-top: -24rpx;
	}

	.limit image {
		width: 100%;
	}

	.limit-money {
		position: absolute;
		left: 40rpx;
		top: 50%;
		transform: translateY(-40%);
		color: rgb(255, 255, 255);
		font-size: 30rpx;
	}

	.limit-time {
		position: absolute;
		right: 16rpx;
		top: 50%;
		transform: translateY(22%);
		color: rgb(109, 33, 255);
		font-size: 28rpx;
	}

	.limit-time text {
		color: #fff;
		display: inline-block;
		border-radius: 10rpx;
		text-align: center;
		/* width: 38rpx; */
		line-height: 38rpx;
		padding: 0 2px;
		background-color: rgb(109, 33, 255);
	}

	.sharePrice {
		font-size: 20rpx;
		position: fixed;
		right: 0;
		top: 300px;
		background-color: #8405dc;
		border-radius: 16rpx 0 0 16rpx;
		color: #fff;
		text-align: center;
		z-index: 50;
		/* padding: 14rpx; */
		padding: 14rpx 8rpx 14rpx 18rpx;
		background: linear-gradient(90deg, #A350E8 0%, #4E07A9 100%);
		font-size: 32rpx;
		letter-spacing: 8rpx;
		font-weight: bold;
	}

	/* 久久店铺 */
	.details-store {
		background-color: #fff;
		margin-top: 16rpx;
		padding: 20rpx;
	}

	.details-store-title,
	.details-store-cont {
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.details-store-title image {
		width: 20%;
		margin-right: 20rpx;
	}

	.details-store-title view {
		overflow: hidden;
		font-size: 36rpx;
		line-height: 50rpx;
		color: $font-color-dark;
	}

	.details-store-title view:nth-child(2) {
		color: $font-color-base;
		font-size: 32rpx;
	}

	.details-store-cont {
		justify-content: center;
		color: $font-color-light;
		font-size: 32rpx;
	}

	.details-store-cont view {
		margin: 0 2%;
		border: 1px $border-color-dark solid;
		margin-top: 20rpx;
		width: 48%;
		line-height: 66rpx;
		text-align: center;
	}

	.platop-css {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		z-index: 799;
		border-radius: 50%;
		font-size: 22rpx;
		text-align: center;
		line-height: 6rpx;
		background-color: rgba(255, 255, 255, 0.7);
		color: #8a8a8a;
		/* border: 1px #8a8a8a solid; */
		font-weight: 900;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.icon-you {
		font-size: 30rpx;
		color: #888;
	}

	.carousel {
		height: 722rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 722rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20rpx 20rpx 0;

		.i_title {
			font-size: 30rpx;
			color: #13001E;
			line-height: 50rpx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.in_sj {
				background: #000;
				color: gold;
				border-radius: 8rpx;
				line-height: 36rpx;
				padding: 0 10rpx;
				font-size: 22rpx;
			}

			.price {
				font-size: 44rpx;
				font-weight: bold;
				color: #9A1FE8;

				.small {
					font-size: 20rpx;
				}
			}

			.p_right {
				font-size: 28rpx;
				color: #9A1FE8;
			}

			.m-price {
				margin: 0 12rpx;
				color: $font-color-light;
				text-decoration: line-through;
			}
		}

	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16rpx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}



	.sharebg {
		position: fixed;
		z-index: 998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		image {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 999;
			transform: translate(-50%, -50%);
		}
	}

	.group_now {
		display: flex;
		align-items: center;
		margin: 10rpx 0;

		image {
			width: 120rpx;
			height: 36rpx;
			z-index: 99;
		}

		text {
			background-color: #f5e9fd;
			font-size: 20rpx;
			height: 36rpx;
			line-height: 36rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			margin-left: -20rpx;
			color: #9A1FE8;
		}
	}

	.butie {
		margin-top: 20rpx;
		color: $bg-color;
		font-weight: bold;
		font-size: 24rpx;
	}

	.c-list {
		font-size: $font-lg;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			position: relative;
		}

		.tit {
			/* width: 140rpx; */
			padding-right: 20rpx;
		}

		.no_refund {
			background: #FFF0DA;
			color: #E19C37;
			line-height: 40rpx;
			padding: 2rpx 10rpx;
			border: 2rpx solid #E19C37;
			font-size: 24rpx;
			border-radius: 6rpx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10rpx;
			}
		}

		.bz-list {
			height: 40rpx;
			font-size: 26rpx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30rpx;
			}
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		bottom: 0;
		z-index: 95;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 690rpx;
		/* height: 100rpx; */
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5);
		width: 100%;
		padding: 20rpx 20rpx 50rpx;

		.btn1,
		.btn2 {
			width: 342rpx;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 24rpx;
		}

		.btn1 {
			background: #eddcfb;
			color: #9A1FE8;
		}

		.btn2 {
			background: linear-gradient(98deg, #FF38E5 0%, #8813E2 61%);
			color: #fff;
		}
	}
</style>